import { MailIcon, PhoneIcon, MapPinIcon, ChevronDownIcon, ChevronUpIcon } from 'lucide-react';
import { usePageTitle } from '../hooks/usePageTitle';
import { useState } from 'react';

export function Contact() {
  usePageTitle('Contact Us');
  
  const [openFAQ, setOpenFAQ] = useState<number | null>(null);
  
  const faqs = [
    {
      question: "How do you select products to review?",
      answer: "We focus on premium appliances with smart features that offer significant value. Our selection process considers market popularity, innovation, and reader requests."
    },
    {
      question: "Do you accept product submissions from manufacturers?",
      answer: "Yes, we're open to testing new products. Please contact our editorial team at reviews@appliancepicks.com with details about your product."
    },
    {
      question: "How can I suggest a product for review?",
      answer: "We welcome reader suggestions! Use our contact form and select \"Product Review Request\" as the subject."
    }
  ];
  
  const toggleFAQ = (index: number) => {
    setOpenFAQ(openFAQ === index ? null : index);
  };
  
  return <div className="w-full bg-white">
      <div className="container mx-auto px-4 py-12">
        <div className="max-w-4xl mx-auto">
          <h1 className="text-3xl md:text-4xl font-bold mb-6 text-center">
            Contact Us
          </h1>
          <p className="text-gray-600 mb-12 text-center max-w-2xl mx-auto">
            Have questions about our recommendations? Want to collaborate? We'd
            love to hear from you.
          </p>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-12">
            <div className="bg-[#f8f9fa] p-6 rounded-lg text-center">
              <div className="w-12 h-12 bg-[#d4a373] rounded-full flex items-center justify-center text-white mx-auto mb-4">
                <MailIcon size={24} />
              </div>
              <h3 className="font-bold text-lg mb-2">Email Us</h3>
              <p className="text-gray-600 mb-2">For general inquiries:</p>
              <a href="mailto:info@appliancepicks.com" className="text-[#d4a373] hover:underline">
                info@appliancepicks.com
              </a>
            </div>
            <div className="bg-[#f8f9fa] p-6 rounded-lg text-center">
              <div className="w-12 h-12 bg-[#d4a373] rounded-full flex items-center justify-center text-white mx-auto mb-4">
                <PhoneIcon size={24} />
              </div>
              <h3 className="font-bold text-lg mb-2">Call Us</h3>
              <p className="text-gray-600 mb-2">Monday-Friday, 9am-5pm PT:</p>
              <a href="tel:+18005551234" className="text-[#d4a373] hover:underline">
                1-800-555-1234
              </a>
            </div>
            <div className="bg-[#f8f9fa] p-6 rounded-lg text-center">
              <div className="w-12 h-12 bg-[#d4a373] rounded-full flex items-center justify-center text-white mx-auto mb-4">
                <MapPinIcon size={24} />
              </div>
              <h3 className="font-bold text-lg mb-2">Visit Us</h3>
              <p className="text-gray-600">
                123 Smart Home Avenue
                <br />
                Tech City, CA 94043
                <br />
                United States
              </p>
            </div>
          </div>
          {/* Contact form */}
          <div className="bg-[#f8f9fa] p-8 rounded-lg shadow-md">
            <h2 className="text-2xl font-bold mb-6">Send Us a Message</h2>
            <form>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                <div>
                  <label htmlFor="name" className="block text-gray-700 mb-2">
                    Your Name
                  </label>
                  <input type="text" id="name" className="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#d4a373]" placeholder="John Doe" />
                </div>
                <div>
                  <label htmlFor="email" className="block text-gray-700 mb-2">
                    Your Email
                  </label>
                  <input type="email" id="email" className="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#d4a373]" placeholder="john@example.com" />
                </div>
              </div>
              <div className="mb-6">
                <label htmlFor="subject" className="block text-gray-700 mb-2">
                  Subject
                </label>
                <input type="text" id="subject" className="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#d4a373]" placeholder="How can we help you?" />
              </div>
              <div className="mb-6">
                <label htmlFor="message" className="block text-gray-700 mb-2">
                  Message
                </label>
                <textarea id="message" rows={5} className="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#d4a373]" placeholder="Your message here..."></textarea>
              </div>
              <button type="submit" className="bg-[#d4a373] hover:bg-[#c99b6e] text-white px-6 py-3 rounded-md font-medium transition-colors">
                Send Message
              </button>
            </form>
          </div>
          {/* FAQs */}
          <div className="mt-16">
            <h2 className="text-2xl font-bold mb-6">
              Frequently Asked Questions
            </h2>
            <div className="space-y-4">
              {faqs.map((faq, index) => (
                <div key={index} className="bg-[#f8f9fa] rounded-lg overflow-hidden">
                  <button
                    onClick={() => toggleFAQ(index)}
                    className="w-full p-6 text-left flex justify-between items-center hover:bg-gray-100 transition-colors"
                  >
                    <h3 className="font-bold text-lg">
                      {faq.question}
                    </h3>
                    {openFAQ === index ? (
                      <ChevronUpIcon size={20} className="text-[#d4a373] flex-shrink-0 ml-4" />
                    ) : (
                      <ChevronDownIcon size={20} className="text-[#d4a373] flex-shrink-0 ml-4" />
                    )}
                  </button>
                  <div className={`overflow-hidden transition-all duration-300 ease-in-out ${
                    openFAQ === index ? 'max-h-96 opacity-100' : 'max-h-0 opacity-0'
                  }`}>
                    <div className="px-6 pb-6">
                      <p className="text-gray-600">
                        {faq.answer}
                      </p>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>;
}